/* 共用css */
body{
    background-color:rgba(0,0,0,0.3);
}
input{
    border:none
}
a{
    color:#545454;text-decoration:none;
}
a:hover{
    color:#ff8000
}
li{
    list-style:none
}
*{
    margin:0;padding:0
}
input,select,textarea{
    -webkit-tap-highlight-color:transparent;-webkit-appearance:none
}
.flex{
    display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
}
.flex-v{
    -webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;
}
.flex-wrap{
    -webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;
}
.flex-row-wrap{
    -webkit-flex-flow:row wrap;-moz-flex-flow:row wrap;-ms-flex-flow:row wrap;-o-flex-flow:row wrap;flex-flow:row wrap;
}
.flex-1{
    -webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;
}
.flex-align-center{
    -webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;
}
.flex-pack-center{
    -webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;
}
.flex-pack-justify{
    -webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;
}
.flex-pack-around{
    -webkit-box-pack:justify;-webkit-justify-content:space-around;-ms-flex-pack:justify;justify-content:space-around;
}
.column-list-2 .list{
    width: 49.5%; margin-bottom: 1%;}
.column-list-3 .list{width: 32.6%;margin-bottom: 1%;
}
.column-list-4 .list{
    width: 24.25%;
}
.display-img img{
    display: block; width: 100%;
}
.no-chat-msg{
    text-align: center;color:#999;font-size: 12px;
}

.chat-container{
    margin:0 auto; /*这里的0可以任意值*/
    /*transform: translate(-50%,-50%);*/
    background-color: #fff;
    width:1500px;
    height: 700px;
    margin-top: 140px;
    border-radius: 5px;
}
.chat-user{
    background-image: linear-gradient(to bottom, #b7c1ac, #c6cfb6, #d6ddbf, #e6ebc9, #f8f9d2);
    overflow-y: auto;
    width: 200px;
}
.chat-user-item{
    margin:6px; padding: 6px;border-radius:3px;
}
.chat-user-item img{
    width: 36px; height: 36px; border-radius: 50%; margin-right: 10px;
}
/*.chat-user-item:hover{*/
/*    background-color: whitesmoke;*/
/*}*/

.chat-user-item.active{
    background-color: whitesmoke;
}

.chat-user-base{
    background-color: rgba(245,245,245,.7);
    padding: 6px;
}
.chat-user-base img{
    width:48px; height:48px; border-radius: 50%; margin-right: 10px;
}

.chat-send-msg{
    border-top:0px #000 solid;
    padding: 20px 10px;
    font-size: 14px;
    box-shadow: 0 -1px 6px 0px #dedede;
}

.newMsg{
    font-size: 14px;color: #F00;
}

.chat-main-panel{
    padding: 15px 15px 5px; overflow-y: auto;
}
.chat-msg-item{
    margin-bottom: 10px;
}
.chat-msg-item .headimg{
    width: 36px; height: 36px; border-radius: 50%;
}
.receive .headimg{
    margin-right: 10px;
}
.receive .chat-msg{
    align-items: flex-start;
}
.chat-msg-base{
    font-size: 12px; color: #999;
}
.receive .chat-msg-base label{
    margin-right: 20px;
}
.chat-msg-info{
    padding: 8px 15px;position: relative; margin-top: 6px;border-radius: 3px;background-color: #e2e2e2;color: #333;font-size: 14px;
}
.chat-msg-info:after{
    content: '';position: absolute;left: -10px;top: 13px;width: 0;height: 0;border-style: solid dashed dashed;border-color: #e2e2e2 transparent transparent;overflow: hidden;border-width: 10px;
}

.sender{
    flex-direction:row-reverse;
}
.sender .chat-msg-base{
    flex-direction:row-reverse;}
.sender .chat-msg-base label{margin-left: 20px;
}
.sender .headimg{
    margin-left: 10px;
}
.sender .chat-msg-info:after{
    right: -10px;left: inherit;border-color: #5FB878 transparent transparent;
}
.sender .chat-msg-info{
    background-color: #5FB878;color: #FFF;
}
.sender .chat-msg{
    align-items: flex-end;
}
